<script setup>
import { getCurrentInstance, reactive } from 'vue';
import { useRoute } from 'vue-router';
import tools from '../tools/tools';
const { proxy } = getCurrentInstance();
const route = useRoute();
const songs=reactive([])
proxy.$https.artistSongs({ id: route.query.id }).then(res => {
    songs.push(res.data.songs)
});
function getId(id) {
    tools.E.emit("Myevent", id);
    let abc={value:songs[0]};
    tools.E.emit("songs",abc);

}
</script>
<template>
    <h1>歌手热歌50首</h1>
    <el-table empty-text="加载中..." :data="songs[0]" style="width: 100%;height: 460px; overflow: auto;">
        <el-table-column prop="name" label="歌曲" width="200" />
        <el-table-column prop="ar[0].name" label="歌手" width="200" />
        <el-table-column prop="al.name" label="专辑" width="300" />
        <el-table-column prop="" label="" width="100" />
        <el-table-column prop="address" label="播放">
            <template v-slot="scope">
                <el-button @click.prevent="getId(scope.row)">
                    点击播放
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<style scoped>
h1{
    margin-bottom: 20px;
    font-weight: bolder;
}
</style>